<template>
	<view>
		<uni-nav-bar left-icon="arrowthinleft" title="二维码" :border="false" :fixed="true" bg="bg-transparent" color="#fff" @clickLeft="goBack()"></uni-nav-bar>
		<view class="flex align-center justify-center flex-direction" style="height: 92vh;">
			<view class=" radius10 padding-y-40 text-center bg_img" style="width: 84%;">
				<image :src="userInfo.avatar" style="width: 120rpx;height: 120rpx;border-radius: 100%;"></image>
				<view class="fs-30 color-333 margin-top-16 margin-bottom-48">{{userInfo.name}}</view>
				<image :src="code" style="width: 320rpx;height: 320rpx;"></image>
				<view class="fs-26 color-666 margin-top-48">扫一扫上面的二维码，了解详情</view>
			</view>
			<view class="bg-fff radius10 padding-y-30 margin-top-30"  style="width: 84%;">
				<view class="flex align-center justify-center">
					<image src="../../static/img/line1.png" style="width: 66rpx;height: 20rpx;"></image>
					<text class="fs-30 color-zhuse margin-x-40">说明</text>
					<image src="../../static/img/line2.png" style="width: 66rpx;height: 20rpx;"></image>
				</view>
				<view class="fs-26 color-666 text-center margin-top-24" style="line-height: 44rpx;">立即分享链接3位朋友加入即<br>获得<text class="color-zhuse fw-600 margin-x-16">100</text>积分</view>
			</view>
			<view class="flex align-center justify-center margin-top-80" style="width: 84%;">
				<view class="public_btn w50" @tap="saveImg()">保存海报</view>
				<view class="public_btn-kong w50" @click="copyVal()">复制链接</view>
			</view>
		</view>
	</view>
</template>

<script>
	import h5Copy from '@/common/junyi-h5-copy/junyi-h5-copy.js'
	export default {
		data() {
			return {
				userInfo:{},
				code:'',
				info:{}
			}
		},
		onLoad() {
			this.init()
		},
		methods:{
			init(){
				this.$api.material().then(res=>{
					if(res.code == 1){
						this.userInfo = res.data.data
					}
				})
				this.$api.invite_friends().then(res=>{
					if(res.code==1){
						this.code = res.data.qrcode;
						this.info = res.data;
					}
				})
			},
			
			
			// 复制邀请码
			copyVal() {
				// #ifdef H5
				 let content = this.info.url // 复制内容，必须字符串，数字需要转换为字符串
				       const result = h5Copy(content)
				       if (result === false) {
				         this.$msg('复制失败，请重试');
				       } else {
				        this.$msg('复制成功');
				       }
				// #endif
				// #ifndef H5
				uni.setClipboardData({
					data: this.info.url,
					success: () => {
						this.$msg('复制成功');
					},
					fail: () => {
						this.$msg('复制失败，请重试');
					}
				});
				// #endif
			},
			// 保存海报
			saveImg() {
				var that = this;
				var shareImg = this.info.poster;
				// console.log(shareImg)
				uni.downloadFile({
					//下载图片
					url: shareImg,
					success: res => {
						console.log(res.tempFilePath);
						uni.saveImageToPhotosAlbum({
							//将图片保存在手机
							filePath: res.tempFilePath, //保存的位置
							success: res => {
								that.$msg('保存成功');
							}
						});
					}
				});
				
			},
			
		}
	}
</script>
<style>
	page{background: url('../../static/img/invite_bg.png') no-repeat;
		background-size: 100% 100%;}
</style>
<style lang="scss" scoped>
	.public_btn-kong{
		height: 80rpx;
		line-height: 80rpx;
		border: 1rpx solid $uni-color-zhuse;
		color:$uni-color-zhuse;
		border-radius: 14rpx;
	}
	.bg_img{
		background: url('../../static/img/code_img.png') no-repeat;
		background-size: 100% 100%;
	}
</style>
